<template>
	<view class="box">
		<u-status-bar></u-status-bar>
		<u-search :height="30" :animation="true" :borderColor="'#ffe60f'" @click="goToSearch" placeholder="请输入关键字"
			:bgColor="'#FFFFFF'" :disabled="true" :showAction="false" :clearabled="false"></u-search>

		<u-tabs :list="list1" lineWidth="30" @change="tabChange" lineColor="#f56c6c" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			<view slot="right" style="padding-left: 4px;" @tap="$u.toast('敬请期待')">
				<u-icon name="list" size="21" bold></u-icon>
			</view>
		</u-tabs>





		<view>
			<scroll-view style="height: 85vh;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
				@scrolltolower="scrolltolower" :refresher-threshold="80" @refresherpulling="onPulling"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">


				<!-- 推荐 -->
				<block v-if="tabIndex == 0">

					<u-swiper :list="swiperList" :indicator="true" indicatorMode="line" keyName="image" showTitle
						:autoplay="true" circular @click="goToSwiperUrl"></u-swiper>

					<WaterfallsFlow :wfList='allShop' @itemTap="itemTap" />
				</block>


				<!-- 生活 -->

				<WaterfallsFlow v-if="tabIndex == 1" :wfList='lifeShop' @itemTap="itemTap" />

				<!-- 花店-->

				<WaterfallsFlow v-if="tabIndex == 2" :wfList='bookShop' @itemTap="itemTap" />

				<!-- 美食-->

				<WaterfallsFlow v-if="tabIndex == 3" :wfList='foodShop' @itemTap="itemTap" />

				<!-- 电子设备-->

				<WaterfallsFlow v-if="tabIndex == 4" :wfList='settingShop' @itemTap="itemTap" />



				<view class="bottom">
					<u-loadmore :status="status" :icon="true" v-if="isShow" :loadingText="loadingText"
						@loadmore="loadmore" />
				</view>
			</scroll-view>

		</view>


		<view class="add-box" @click="nava">
			<u-icon name="plus" color="#fff" size="28"></u-icon>
		</view>



	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue';
	export default {
		data() {
			return {
				swiperList: [{
					image: 'https://abc.apricity.asia/public/icon/swiper2.jpg',
					title: '闲置商家招聘了，只需简单上传收付款即可成为商家'
				}],
				list1: [{
					name: '推荐',
				}, {
					name: '生活'
				}, {
					name: '花店'
				}, {
					name: '美食'
				}, {
					name: '电子设备'
				}],
				list: [],
				tabIndex: 0,
				allShopFlag: false,
				allShop: [],
				allShopPage: 1,
				lifeShopFlag: false,
				lifeShop: [],
				lifeShopPage: 1,
				bookShopFlag: false,
				bookShop: [],
				bookShopPage: 1,
				foodShopFlag: false,
				foodShop: [],
				foodShopPage: 1,
				settingShopFlag: false,
				settingShop: [],
				settingShopPage: 1,
				triggered: false,
				_freshing: false,
				status: 'loadmore',
				isShow: false,
				adverstingList: [
					{
						id: 1,
						img: [
							'https://abc.apricity.asia/public/banner/banner2.png'
						],
						isAdverst: true,
						url: '/pages/offlinePay/index',
						appId: 'wx82c8146b5affc9cf'
					},
					{
						id: 1,
						img: [
							'https://abc.apricity.asia/public/banner/banner1.jpg'
						],
						isAdverst: true,
						url: '/pages/offlinePay/index',
						appId: 'wx82c8146b5affc9cf'
					}
				]
			}
		},
		computed: {
			...mapGetters(['sumNumber']),
			...mapState(['token'])
		},
		methods: {
			adverstingClick(item) {
				console.log(item)
			},
			goToSwiperUrl(index) {
				console.log(index)
				if (index === 0) {
					uni.navigateTo({
						url: `/shop/addShop/addShop`
					})
				}
			},
			scrolltolower() {
				if (this.tabIndex === 0) {
					uni.$u.throttle(this.getAllShop, 500)
				} else if (this.tabIndex === 1) {
					uni.$u.throttle(this.getLifeShop, 500)
				} else if (this.tabIndex === 2) {
					uni.$u.throttle(this.getBookShop, 500)
				} else if (this.tabIndex === 3) {
					uni.$u.throttle(this.getFoodShop, 500)
				} else if (this.tabIndex === 4) {
					uni.$u.throttle(this.getSettingShop, 500)
				}
			},
			nava() {
				uni.navigateTo({
					url: '/shop/addShop/addShop'
				})
			},
			/*
				列表到底
			*/
			loadmore() {
				if (this.tabIndex === 0 && this.allShop.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabIndex === 1 && this.lifeShop.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabIndex === 2 && this.bookShop.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabIndex === 3 && this.foodShop.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabIndex === 4 && this.settingShop.length === 0) {
					this.loadmoreText = '没有更多了'
				}
			},
			onPulling(e) {

			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.isShow = false
				if (this.tabIndex === 0) {
					this.allShop = []
					this.allShopPage = 1
					this.getAllShop()
					this.triggered = false;
					this._freshing = false;
				}
				if (this.tabIndex === 1) {
					this.lifeShop = []
					this.lifeShopPage = 1
					this.getLifeShop()
					this.triggered = false;
					this._freshing = false;
				}
				if (this.tabIndex === 2) {
					this.bookShop = []
					this.bookShopPage = 1
					this.getBookShop()
					this.triggered = false;
					this._freshing = false;
				}
				if (this.tabIndex === 3) {
					this.foodShop = []
					this.foodShopPage = 1
					this.getFoodShop()
					this.triggered = false;
					this._freshing = false;
				}
				if (this.tabIndex === 4) {
					this.settingShop = []
					this.settingShopPage = 1
					this.getSettingShop()
					this.triggered = false;
					this._freshing = false;
				}
				this.isShow = true
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			onAbort() {

			},
			/*
				点击tab
			*/
			tabChange(e) {
				this.tabIndex = e.index
				this.triggered = false
				this._freshing = false
				this.isShow = false
				this.onRefresh()
			},
			/*
							获取电子设备商品
			 */
			async getSettingShop() {
				this.status = 'loading';
				try {
					let obj = {
						classify: '电子设备',
						page: this.settingShopPage + ''
					}
					const {
						data: res
					} = await uni.$http.post(`/shop/byclassifygetshopdetail`, obj)
					if (res.status !== 0) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0 || res.length === 0) return this.status = 'nomore';
					if (res.data.lengtn !== 10) this.status = 'nomore';
					this.status = 'loadmore';
					this.settingShop = [...this.settingShop, ...res.data]
					this.settingShopPage++
				} catch (e) {
					this.status = 'nomore';
				}
			},
			/*
							获取美食商品
			 */
			async getFoodShop() {
				this.status = 'loading';
				try {
					let obj = {
						classify: '美食',
						page: this.foodShopPage + ''
					}
					const {
						data: res
					} = await uni.$http.post(`/shop/byclassifygetshopdetail`, obj)
					if (res.status !== 0) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0 || res.length === 0) return this.status = 'nomore';
					if (res.data.lengtn !== 10) this.status = 'nomore';
					this.status = 'loadmore';
					this.foodShop = [...this.foodShop, ...res.data]
					this.foodShopPage++
				} catch (e) {
					this.status = 'nomore';
				}
			},
			/*
							获取花店商品
			 */
			async getBookShop() {
				this.status = 'loading';
				try {
					let obj = {
						classify: '花店',
						page: this.bookShopPage + ''
					}
					const {
						data: res
					} = await uni.$http.post(`/shop/byclassifygetshopdetail`, obj)
					if (res.status !== 0) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0 || res.length === 0) return this.status = 'nomore';
					if (res.data.lengtn !== 10) this.status = 'nomore';
					this.status = 'loadmore';
					this.bookShop = [...this.bookShop, ...res.data]
					this.bookShopPage++
				} catch (e) {
					this.status = 'nomore';
				}
			},
			/*
				获取生活商品
		   */
			async getLifeShop() {
				this.status = 'loading';
				try {
					let obj = {
						classify: '生活',
						page: this.lifeShopPage + ''
					}
					const {
						data: res
					} = await uni.$http.post(`/shop/byclassifygetshopdetail`, obj)
					if (res.status !== 0) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0 || res.length === 0) return this.status = 'nomore';
					if (res.data.lengtn !== 10) this.status = 'nomore';
					this.status = 'loadmore';
					this.lifeShop = [...this.lifeShop, ...res.data]
					this.lifeShopPage++
				} catch (e) {
					this.status = 'nomore';
				}
			},
			/*
				获取所有商品
			*/
			async getAllShop() {
				this.status = 'loading';
				try {
					const {
						data: res
					} = await uni.$http.get(`/shop/getshopdetail/${this.allShopPage}`)
					console.log(res.data)
					if (res.status !== 0) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0 || res.length === 0) return this.status = 'nomore';
					if (res.data.lengtn !== 10) this.status = 'nomore';
					this.status = 'loadmore';
					if (this.allShopPage === 1) {
						this.allShop = [...this.adverstingList, ...res.data]
					} else {
						this.allShop = [...this.allShop, ...res.data]
					}
					this.allShopPage++
				} catch (e) {
					this.status = 'nomore';
				}
			},
			/*
				前往搜索
			*/
			goToSearch() {
				uni.navigateTo({
					url: '/shop/searchShop/searchShop'
				})
			},
			itemTap(item) {
				if (item.isAdverst) {
					uni.request({
						url: `https://www.apricity.asia:8911/adv/addAdv/${item.id}`,
						complete: () => {
							uni.navigateToMiniProgram({
								appId: item.appId,
								path: item.url,
								success: res => {
									// 打开成功
									console.log("打开成功", res);
								},
								fail: err => {
									console.log(err);
								}
							});
						}
					})
				} else {
					uni.navigateTo({
						url: '/shop/shopDetail/shopDetail?shop=' + JSON.stringify(item)
					})
				}
			}
		},
		components: {
			WaterfallsFlow
		},
		onLoad() {
			this.isShow = false
			this._freshing = false;
			this.getAllShop()
			this.triggered = true;
			this.isShow = true
		},
		onShow() {
			if (this.token.length !== 0) {
				this.sumNumber === 0 ? '' : uni.setTabBarBadge({
					index: 3,
					text: this.sumNumber + ''
				})
			} else {
				uni.removeTabBarBadge({
					index: 3
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-box {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		background: #c4c6c9;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 5%;
		bottom: 10%;
		z-index: 999;
	}

	/deep/.u-back-top {
		background-color: #FFFFFF !important;
		border: 2px solid #c1c1c1 !important;
	}

	/deep/.wrap {
		height: 50px;

	}

	.page {
		min-height: 95vh;
		background: #FFFFFF;
	}

	/deep/.u-navbar__content__left {
		display: none !important;
	}

	/deep/ .u-navbar__content__title {
		color: #333333;
		font-size: 20px;
		font-weight: bold;
	}

	.box {
		padding: 10px 10px 0 10px;
		background-color: #FFFFFF;
	}

	/deep/.u-search__content {
		font-size: 20px !important;
		border-width: 3px !important;
	}

	/deep/ .uni-input-form {
		font-size: 20px !important;
	}

	.u-tabs {
		margin-top: 10rpx;
	}

	.cart {
		width: 90px;
		height: 90px;
		position: fixed;
		right: -5%;
		bottom: 15%;
		z-index: 999;

		.cart-img {
			width: 90px;
			height: 90px;
		}

		.bage {
			position: absolute;
			background-color: #f56c6c;
			color: #FFFFFF;
			font-size: 12px;
			width: 20px;
			height: 20px;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 23%;
			top: 23%;
			z-index: 9999;
		}
	}
</style>
